<template>
    <div>
        <!-- 使用 Element Plus 的标签页组件实现登录界面的切换 -->
        <el-tabs v-model="activeTab">
            <!-- 登录标签页内容 -->
            <el-tab-pane label="登录" name="login">
                <!-- 登录标题 -->
                <h2 class="login-title">学生登录</h2>
                <!-- 登录表单 -->
                <el-form 
                    :model="loginForm" 
                    label-width="100px"
                    :rules="loginRules"
                    ref="loginFormRef"
                >
                    <!-- 学号输入项 -->
                    <el-form-item label="学号" prop="number">
                        <el-input 
                            v-model="loginForm.number" 
                            placeholder="请输入学号"
                            clearable
                        />
                    </el-form-item>
                    <!-- 密码输入项 -->
                    <el-form-item label="密码" prop="password">
                        <el-input 
                            v-model="loginForm.password" 
                            type="password" 
                            placeholder="请输入密码"
                            show-password
                        />
                    </el-form-item>
                    <!-- 登录按钮 -->
                    <el-form-item>
                        <el-button 
                            type="primary" 
                            @click="handleLogin"
                            :loading="loginStore.loginLoading"
                        >
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            
            <!-- 注册申请标签页 -->
            <el-tab-pane label="注册" name="register">
                <h2 class="login-title">注册申请</h2>
                <!-- 注册申请表单 -->
                <el-form 
                    :model="registerForm" 
                    label-width="100px"
                    :rules="registerRules"
                    ref="registerFormRef"
                >
                <!-- 账号输入项 -->
                <el-form-item label="用户名" prop="number">
                    <el-input 
                        v-model="registerForm.number" 
                        placeholder="请输入用户名"
                        clearable
                    />
                </el-form-item>
                <!-- 密码输入项 -->
                <el-form-item label="密码" prop="password">
                    <el-input 
                        v-model="registerForm.password" 
                        type="password" 
                        placeholder="设置密码"
                        show-password
                    />
                </el-form-item>
                <!-- 确认密码输入项 -->
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input 
                        v-model="registerForm.confirmPassword" 
                        type="password" 
                        placeholder="请再次输入密码"
                        show-password
                    />
                </el-form-item>
                    <!-- 学校名称输入项 -->
                    <el-form-item label="真实姓名" prop="realName">
                        <el-input 
                            v-model="registerForm.realName" 
                            placeholder="请输入真实姓名"
                            clearable
                        />
                    </el-form-item>
                    <!-- 联系电话输入项 -->
                    <el-form-item label="学籍号" prop="idCard">
                        <el-input 
                            v-model="registerForm.idCard" 
                            placeholder="请输入学籍号"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="家长姓名" prop="userNum">
                        <el-input 
                            v-model="registerForm.userNum" 
                            placeholder="请输入家长姓名"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="家长身份证" prop="userIdCard">
                        <el-input 
                            v-model="registerForm.userIdCard" 
                            placeholder="请输入家长身份证号"
                            clearable
                        />
                    </el-form-item>
                    <!-- 提交申请按钮 -->
                    <el-form-item>
                        <el-button 
                            type="primary" 
                            @click="handleRegister"
                            :loading="loading"
                        >
                            提交申请
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useLoginStore } from '../../stores/index.js';  // 导入Pinia登录存储
import { studentRegister} from '../../api/login/login.js'

const router = useRouter();
const activeTab = ref('login');  // 当前激活的标签页名称
const loginFormRef = ref();           // 表单引用，用于表单验证
const registerFormRef = ref();
const loginStore = useLoginStore();  // 获取登录存储实例
const loading = ref(false);
/**
 * 表单数据对象
 * @property {string} number - 用户输入的学号
 * @property {string} password - 用户输入的密码
 * @property {string} loginType - 登录类型，固定为 'student'
 */
const loginForm = reactive({
    number: '',
    password: '',
    loginType: 'student'  // 指定登录类型
});

const registerForm = reactive({
    number: '',
    password: '',
    confirmPassword: '',
    realName: '',
    idCard: '',
    userNum: '',
    userIdCard: '',
    loginType: 'student'
});

/**
 * 表单验证规则
 * @property {Array} number - 学号验证规则：必填且必须为数字
 * @property {Array} password - 密码验证规则：必填且长度在6到20个字符之间
 */
const loginRules = {
    number: [
        { required: true, message: '请输入学号', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
};

const registerRules = {

    number: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== registerForm.password) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ],
    realName: [
        { required: true, message: '请输入真实姓名', trigger: 'blur' }
    ],
    idCard: [
        { required: true, message: '请输入学籍号', trigger: 'blur' }
    ]

};

/**
 * 处理用户登录逻辑
 * 验证表单数据，调用登录接口，根据结果跳转页面或提示错误信息
 * @async
 * @function handleLogin
 * @returns {Promise<void>}
 */
const handleLogin = async () => {
    try {
        // 触发表单验证
        await loginFormRef.value.validate();
        // 调用登录接口并获取响应结果
        const res = await loginStore.postLogin(loginForm);
        
        // 登录成功跳转
        console.log(res);
        if (res.code === 200) {
            router.push('/student/home');
        }
    } catch (error) {
        console.log('登录失败:', error);
    }
};

const handleRegister = async () => {
    try {
        // 表单验证
        await registerFormRef.value.validate();
        console.log(registerForm);
        loading.value = true;
        const res = await studentRegister(registerForm)
        if(res.code === 200) {
            activeTab.value = 'login';
        }
    } catch (error) {
        console.log('表单验证失败:', error);
    } finally {
        loading.value = false;
    }
};
</script>

<style scoped>
@import '../../styles/login_styles.css';
</style>
